<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--
	构造 Vue 实例时传入的各种选项大多数都可以在组件里使用。只有一个例外：data 必须是函数

	例：data:function(){}
-->
<div id="example-2">
  	<input v-model="parentMsg">
  	<br>
  	<child v-bind:my-message="parentMsg"></child>
</div>
<script type="text/javascript">
	// Vue.component('child',{
	// 	template:'<div>{{myMessage}}</div>',
	// 	props:['myMessage']

	// });
	// var vm = new Vue({
	// 	el:"#example-2",
	// 	data:{
	// 		parentMsg:"1",
	// 	}
	// })




	new Vue({
		el:"#example-2",
		data: {
			parentMsg: 'a',
		},
		components:{
			child:{
				template:'<div>{{myMessage}}----{{counter}}----{{normalizedSize}}</div>',
				// props:["myMessage"],
				props:{
					myMessage: {
				      	type: Number,
				     	required: true
    				},
				},
				data: function () {
				  	return { counter: this.myMessage+10 }
				},
				computed: {
  					normalizedSize: function () {
    					return this.myMessage.trim().toLowerCase()
  					}
				}
			}
		}


	})
</script>
</body>
</html>